:root {
    --font-size-thead: 12px;
    --font-size-tobdy: 13px;
    --bg-thead: #f5f8fa; //表头背景色
    --colot-thead: #646567; //
    --color-tbody: #303133; //内容字体色
    --bg-hover: #f0f5ff;
    --padd-double: 0 10px;
    --border-bottom-color: #f0f2f4;
    --hei-table: 37px;
    --normal-index: 1;
    --shadow-right: rgb(237 237 237) 3px 1px 6px;
    --sanjiao: #bcbcbc;
}

// .scrool_parent{
//     // overflow: auto;
//     // &::after{
//     //     content: "";
//     //         display: block;
//     //         clear: both;
//     // }
// }
// rgb(235, 235, 235) 3px 1px 4px;
// 8px 0px 10px -5px rgba(0, 0, 0, 0.12);
// box-shadow: var(--vxe-table-fixed-left-scrolling-box-shadow);
.table-wrapper {
    .el-scrollbar__wrap {
        position: relative;
    }

    .el-scrollbar__view {

        // overflow: auto;
        &::after {
            content: "";
            display: block;
            clear: both;
        }
    }

    .el-scrollbar__bar {
        // z-index: var(--el-index-normal);
        z-index: 25;
    }

    flex: auto;
    min-width: 0;
    min-height: 0;
}

.merak_table {

    // width: 100%;
    // overflow: auto;
    // height: 400px;
    >table {
        width: 100%;
        border: 0;
        border-spacing: 0;
        border-collapse: separate;
        // table-layout: auto;
        table-layout: fixed;

        .thead-row>th {
            // padding: 5px 10px;
            height: 35px;
            background-color: var(--bg-thead);
            // background-color: antiquewhite;
            font-size: var(--font-size-thead);
            font-weight: normal;
            color: var(--colot-thead);
            text-align: left;

            &.table-number {
                text-align: center;
                // background-color: rgb(255, 255, 255);
                min-width: 35px;
                width: 50px;
                max-width: 50px;
            }
        }
    }

    table .tbody-row>td {
        // padding: 5px 10px;
        height: var(--hei-table);
        font-weight: normal;
        font-size: var(--font-size-tobdy);
        color: var(--color-tbody);
        text-align: left;
        border-bottom: 1px solid var(--border-bottom-color);
        background-color: #fff;
        // box-sizing: border-box;  
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &.table-number {
            text-align: center;
            // background-color: rgb(250, 250, 250);
            cursor: no-drop;
        }
    }

    .table-checkbox {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        text-align: center;
    }

    // 左侧固定
    .table-fixed-column-left,
    .table-fixed-rows-left {
        position: sticky;
        z-index: calc(var(--normal-index) + 1);
    }

    //右侧阴影
    .table-box-shadow:not(:has(+ .table-box-shadow)) {
        // border-right: 1px solid red;
        box-shadow: var(--shadow-right);
    }

    .table-fixed-column {
        position: sticky;
        top: 0;
        z-index: var(--normal-index);

        &.table-fixed-column-left {
            z-index: 8;
        }
    }

    // 右侧固定
    .table-cell-fixed-right {
        position: sticky;
        // z-index:   calc(var(--normal-index) + 1);
        right: 0px;
        top: 0;
    }

    .table-fixed-column-right {
        z-index: 8;
    }

    // 左侧阴影

    .table-box-shadow-right:not(:has(+ .table-box-shadow-right)) {
        // border-right: 1px solid red;
        box-shadow: -2px 0px 5px 1px #f4f4f4;
    }

    .header-cell {
        min-width: 100px;
        padding: var(--padd-double);
    }

    .opration-cell {
        padding: var(--padd-double);
    }

    .cell-resizable {
        position: absolute;
        cursor: col-resize;
        user-select: none;
        display: flex;
        top: 50%;
        right: 0;
        width: 5px;
        height: 14px;
        opacity: 0;
        transform: translateY(-50%);
        transition: opacity 0.3s;

        &::before {
            content: "";
            width: 1px;
            height: 100%;
            background-color: #b3b5b9;
            box-sizing: border-box;
            display: inline-block;
            vertical-align: middle;
        }

        &::after {
            content: "";
            width: 1px;
            height: 100%;
            background-color: #b3b5b9;
            box-sizing: border-box;
            display: inline-block;
            vertical-align: middle;
            margin-left: 3px;
        }
    }

    .cell-nowrap {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0;
        cursor: default;

        >div {
            // padding: 0 10px;
        }

        &.select-nureal {
            position: relative;

            &::after {
                content: "";
                width: 7px;
                height: 7px;
                border: 1px var(--sanjiao) solid;
                box-sizing: content-box;
                position: absolute;
                border-left: 0;
                border-top: 0;
                top: 1px;
                right: 3px;
                border-bottom-right-radius: 2px;

                transform: rotate(45deg) scaleY(1);
                transition: transform 0.15s ease-in 50ms;
                transform-origin: center;
            }
        }

        .el-input__wrapper,
        .el-select__wrapper {
            box-shadow: none;
            padding: 4px 0;
        }
    }

    .table-cell {
        transition: background-color 0.25s ease;
    }

    .el-button {
        padding: 0;
        min-width: auto;
    }

    //编辑表格样式
    &.edit_table {
        position: absolute;
        top: 0;
        width: 100%;
        -webkit-user-select: none;
        /* Safari */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* IE10+ */
        user-select: none; 

        /* Standard syntax */
        >table .thead-row>th {
            border: 1px solid #e4e8ed;
            border-left: none;
            border-bottom: 2px solid #e4e8ed;
            // background-image: linear-gradient(rgb(245 248 252 / 87%), rgb(242 242 242 / 0%));
            background-image: linear-gradient(rgb(245 248 252 / 87%) 10%, rgb(242 242 242 / 0%) 50%);

            // box-shadow: rgb(249 249 249) 0px 0px 10px inset;//3px 1px 4px;
            &:first-child {
                border-left: 1px solid #e4e8ed;
            }

            &.table-fixed-column.table-fixed-column-left {
                box-shadow: rgb(249 249 249) 0px 0px 10px inset;
            }

            &.table-checkbox {
                text-align: center;
            }
        }

        >table .tbody-row>td {
            border: 1px solid #e4e8ed;
            border-left: none;
            border-top: none;
            cursor: pointer;
            padding: 0 10px;

            &.selectedTd {
                // border-top: 0px solid  #e4e8ed ;
                // border-left: 2px solid  var(--el-color-primary) ;
                // border-right: 2px solid  var(--el-color-primary) ;
                // border-bottom: 1px solid #e4e8ed;
                background-color: var(--el-color-primary-light-9);;
                // border-left: 2px solid var(--el-color-primary) ;
                // border-right: 2px solid var(--el-color-primary);
                // &:first-child{
                //     border-bottom: none!important;
                // }
                // &:last-child {
                //     border-bottom: 2px solid var(--el-color-primary);
                // }
                /* 选中单元格的背景色 */
            }

            &.table-number {
                border-bottom: none;

            }

            >.cell-nowrap {
                cursor: pointer;
                min-height: 10px;
            }

            &.err-tip {
                position: relative;
                color: #ef1717;

                .err-tip-triangle {
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    border-top: 4px solid #ef1717;
                    border-right: 4px solid #ef1717;
                    border-left: 4px solid transparent;
                    border-bottom: 4px solid transparent;
                    ;
                    // transform: rotate(225deg);
                }


            }

            &.edit_disable {
                background-color: #f8f8f9;
                color: #8f939c;
                cursor: no-drop;

                .cell-nowrap {
                    cursor: no-drop;
                }
            }

            &.table-checkbox {
                text-align: center;
            }

            &:first-child {
                border-left: 1px solid #e4e8ed;
                cursor: default;

                >.cell-nowrap {
                    cursor: default;
                }
            }

            &:last-child {
                cursor: default;

                >.cell-nowrap {
                    cursor: default;
                }
            }

            // 当前点击td
            &.active-bg-row-td {
                border: 2px solid var(--el-color-primary);
            }
        }

        >table .tbody-row:last-child>td {
            &.table-number {
                border-bottom: 1px solid #e4e8ed;

            }
        }

        // 列选中
        .active-bg-row {
            background-color: var(--el-color-primary-light-8);
        }



    }
}

.error_div_tip {
    position: fixed;
    font-size: 13px;
    z-index: 99;
    background-color: #fff;
    display: none;

    .err_cont {
        padding: 13px 16px;
        box-shadow: #c2c2c2 3px 3px 10px 2px;
        min-width: 110px;
        max-width: 250px;

        .tip_title {
            color: #ef1717;
        }

        .err_tip_item {
            margin-top: 5px;
        }
    }
}

.dark{
    .merak_table {
        >table .thead-row>th{
            background-color: var(--el-bg-color);
            background-image: none;
        }
        >table .tbody-row>td{
            background-color: var(--el-bg-color);
            background-image: none;
            color: #fff;
        }
    }
}